 template
<script setup>
// 导入 VueUse 核心功能中的 useDark 和 useToggle 函数
import { useDark, useToggle } from "@vueuse/core";

// 使用 useDark 函数来管理页面的暗黑模式
// 此处配置了如何在 html 标签上添加或移除 'dark' 或 'light' 类以切换暗黑和明亮模式
useDark({
  selector: 'html',
  attribute: 'class',
  valueDark: 'dark',
  valueLight: 'light',
})

// 再次使用 useDark 函数，这次配置了一个 onChanged 回调函数
// 当暗黑模式切换时，onChanged 回调函数会被调用，并将暗黑模式的状态传递给 useToggle 函数
useDark({
  onChanged(dark) {
    useToggle(dark)
  }
})
</script>

<template>
<!--  定义页面的 header 部分-->
  <header>
    <div class="wrapper">
<!--      // 使用 router-view 组件来动态加载路由对应的组件-->
      <router-view/>
    </div>
  </header>
</template>

<style scoped>
         /*为当前组件的 header 元素定义样式*/
header {
  line-height: 1.5;
}
</style>
